<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>PHP12306火车票查询接口API实例</title>
        <meta name="keywords" content="PHP火车票API,PHP车票查询" /> 
        <link rel="shortcut icon" href="favicon.ico">
        <link href="static/js/layui/css/layui.css" rel="stylesheet">
        <link href="static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
        <link href="static/css/animate.min.css" rel="stylesheet">
        <link href="static/css/style.min.css?v=4.1.0" rel="stylesheet">
        <link href="static/css/iCheck/custom.css" rel="stylesheet">
    </head>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-6" style="width: 41%">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>12306火车票查询 -- 作者：ShenZhongChao</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-horizontal m-t" id="commentForm">
                                <input type="hidden" id="f_c"/>
                                <input type="hidden" id="t_c"/>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">出发地：</label>
                                    <div class="input-group col-sm-3" style="width: 30%;">
                                        <input type="text" class="form-control" placeholder="请输入站名或拼音" id="f_s" name="f_s">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">目的地：</label>
                                    <div class="input-group col-sm-3" style="width: 30%;">
                                        <input type="text" class="form-control" placeholder="请输入站名或拼音" id="t_s" name="t_s">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            </ul>
                                        </div>
                                        <!-- /btn-group -->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">出发时间：</label>
                                    <div class="input-group col-sm-3" style="width: 30%;">
                                        <input id="date" type="text" class="laydate-icon form-control layer-date" name="date" required="" aria-required="true" style="height:30px">

                                    </div>
                                </div>

                                <div class="form-group" style="width: 130%; margin-left: -38px;">
                                    <label class="col-sm-2 control-label">车次类型：</label>
                                    <div class="input-group col-sm-8">
                                        <div class="radio i-checks col-sm-3" style="width: 29%; margin-left: -20px;">
                                            <label>
                                                <input type="checkbox" value="G" name="train_type"> <i></i> GC-高铁/城际</label>
                                        </div>
                                        <div class="radio i-checks col-sm-3" style="margin-left: -30px">
                                            <label>
                                                <input type="checkbox" value="D" name="train_type"> <i></i> D-动车</label>
                                        </div>
                                        <div class="radio i-checks col-sm-3" style="margin-left: -30px">
                                            <label>
                                                <input type="checkbox" value="Z" name="train_type"> <i></i> Z-直达</label>
                                        </div>
                                        <div class="radio i-checks col-sm-3" style="margin-left: -30px">
                                            <label>
                                                <input type="checkbox" value="T" name="train_type"> <i></i> T-特快</label>
                                        </div>
                                        <div class="radio i-checks col-sm-3" style="margin-left: -30px">
                                            <label>
                                                <input type="checkbox" value="K" name="train_type"> <i></i> K-快速</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">车次：</label>
                                    <div class="input-group col-sm-3" style="width: 30%;">
                                        <input id="train" type="text" class="form-control" name="train" placeholder="例如：K919">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">刷票频率：</label>
                                    <div class="input-group col-sm-3" style="width: 30%;">
                                        <input id="flash" type="text" class="form-control" name="flash" placeholder="如：5 即5秒钟刷新一次">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-3 col-sm-offset-2">
                                        <!--<input type="button" value="提交" class="btn btn-primary" id="postform"/>-->
                                        <button class="btn btn-primary" type="submit" id="search">查询</button>
                                    </div>
                                </div>

                                <div class="alert alert-danger">
                                    注意 ： <br/>
                                    1、输入出发、到达站点时，请选择下拉框中的值，否则无法查询。<br/>
                                    2、默认查询全部车次。<br/>
                                    3、不填写 车次 默认查询所有符合条件的车次。<br/>
                                    4、不填写刷票频率不会进行刷票，刷票频率请填写大于 2 的数字
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-sm-6" style="width: 59%;">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>查询结果 -- 作者：ShenZhongChao</h5>
                            <span id="res" style="margin-left: 10px;" ></span>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>车次</th>
                                        <th>出发站 <br/ > 到达站</th>
                                        <th>出发时间 <br /> 到达时间</th>
                                        <th>车程历时</th>
                                        <th>商务座 <br /> 特等座</th>
                                        <th>一等座</th>
                                        <th>二等座</th>
                                        <th>高级软卧</th>
                                        <th>软卧</th>
                                        <th>动卧</th>
                                        <th>硬卧</th>
                                        <th>软座</th>
                                        <th>硬座</th>
                                        <th>无座</th>
                                        <th>其他</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody id="s_res" style="text-align: center;">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="static/js/jquery.min.js?v=2.1.4"></script>
        <script src="static/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="static/js/iCheck/icheck.min.js"></script>
        <script src="static/js/suggest/bootstrap-suggest.min.js"></script>
        <script src="static/js/layui/layui.js"></script>
        <script type="text/javascript">

            var layer;
            layui.use('layer', function() {
                layer = layui.layer;
            });

            $(function() {
                $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green", });

                var fsSuggest = $("#f_s").bsSuggest({
                    url: "sites_data/station.json",
                    idField: "stationFlag",
                    keyField: "stationName",
                    //inputWarnColor: '', //输入框内容不是下拉列表选择时的警告色
                    showBtn: true //显示下拉
                }).on("onDataRequestSuccess",
                        function(e, result) {

                            //console.log("onDataRequestSuccess: ", result)
                        }).on("onSetSelectValue",
                        function(e, keyword) {
                            $("#f_c").val(keyword.id);
                            //console.log("onSetSelectValue: ", keyword)
                        }).on("onUnsetSelectValue",
                        function(e) {
                            console.log("onUnsetSelectValue")
                        });

                var tsSuggest = $("#t_s").bsSuggest({
                    url: "sites_data/station.json",
                    idField: "stationFlag",
                    keyField: "stationName",
                    //inputWarnColor: '', //输入框内容不是下拉列表选择时的警告色
                    showBtn: true //显示下拉
                }).on("onDataRequestSuccess",
                        function(e, result) {

                            //console.log("onDataRequestSuccess: ", result)
                        }).on("onSetSelectValue",
                        function(e, keyword) {
                            $("#t_c").val(keyword.id);
                            //console.log("onSetSelectValue: ", keyword)
                        }).on("onUnsetSelectValue",
                        function(e) {
                            console.log("onUnsetSelectValue")
                        });


                layui.use('laydate', function() {
                    var laydate = layui.laydate;
                    //日历定义
                    var start = {
                        min: laydate.now(),
                        format: "YYYY-MM-DD",
                        max: "2050-01-01",
                        istime: true,
                        istoday: true,
                    };

                    document.getElementById('date').onclick = function() {
                        start.elem = this;
                        laydate(start);
                    }
                });
                var id;
                $("#search").click(function() {

                    clearInterval(id);
                    var f_s = $("#f_c").val();
                    if (f_s == '') {
                        layer.msg('请选择出发城市', {'time': 1000});
                        return false;
                    }

                    var t_s = $("#t_c").val();
                    if (t_s == '') {
                        layer.msg('请选择到达城市', {'time': 1000});
                        return false;
                    }

                    var date = $("#date").val();
                    if (date == '') {
                        layer.msg('请选择出发日期', {'time': 1000});
                        return false;
                    }
                    //指定的车次
                    var train = $.trim($("#train").val());
                    //车次类型
                    var train_type = [];
                    $('input[name="train_type"]:checked').each(function() {
                        train_type.push($(this).val());
                    });

                    //刷新频率
                    var flash = $("#flash").val();
                    if (flash == '') {
                        showData(f_s, t_s, date, train, train_type);
                    } else {

                        if (parseInt(flash) < 2) {
                            layer.msg('刷新频率必须大于2', {'time': 1000});
                            return false;
                        }

                        showData(f_s, t_s, date, train, train_type);
                        layer.msg('数据将' + parseInt(flash) + '秒刷新一次', {'time': 2000});
                        id = setInterval(function() {
                            showData(f_s, t_s, date, train, train_type);
                        }, parseInt(flash) * 1000);
                    }
                });

            });

            //展示数据
            function showData(f_s, t_s, date, train, train_type) {
                var loading = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
                $.getJSON('./ajax.php', {'f_s': f_s, 't_s': t_s, 'date': date}, function(res) {
                    layer.close(loading);
                    //console.log(res.data);         //完整JSON数据，包括flag（代号标记状态）、map（站点信息）、result（余票数据）等
                    //console.log(res.data.result);  //余票JSON数据
                    //console.log(res.data.map);     //车站站点JSON数据
                    if (res.data.flag) {
                        var _html = '';
                        
                        $.each(res.data.result, function(k, v) {
                            if (train != '' && train != v.station_train_no) {
                                return true;
                            }

                            if (train_type.length > 0 && $.inArray(v.station_train_no.substr(0, 1), train_type) < 0) {
                                return true;
                            }

                            //转化出发站点代号成出发站点中文、目的站点代号成目的站点中文
                            v.start_station = stationChange(res.data.map, v.start_station); 
                            v.end_station = stationChange(res.data.map, v.end_station);   
                            
                            _html += "<tr><td>" + v.station_train_no + "</td>";
                            _html += "<td><span style='color: white; background-color: #f5bf69;'>始:</span>" + v.start_station;
                            _html += "<br /><span style='color: white; background-color: #0f85d7;'>终:</span>" + v.end_station + "</td>";
                            _html += "<td>" + v.start_time + "<br />" + v.end_time + "</td>";
                            _html += "<td>" + v.spend_time + "<br />当日到达</td>";
                            _html += "<td>" + v.swztz_num + "</td>";
                            _html += "<td>" + v.yd_num + "</td>";
                            _html += "<td>" + v.ed_num + "</td>";
                            _html += "<td>" + v.gr_num + "</td>";
                            _html += "<td>" + v.rw_num + "</td>";
                            _html += "<td>" + v.dw_num + "</td>";
                            _html += "<td>" + v.yw_num + "</td>";
                            _html += "<td>" + v.rz_num + "</td>";
                            _html += "<td>" + v.yz_num + "</td>";
                            _html += "<td>" + v.wz_num + "</td>";
                            _html += "<td>" + v.qt_num + "</td>";
                            _html += "<td><a href='#' title='未实现真正功能！' class='bz'>" + v.bz_num + "</a></td></tr>";
                        });
                        $("#s_res").html(_html);
                        $("#res").html("( " + dateChange($('#date').val())/*得到的JSON数据中的日期是字符串，需要进行格式转化*/ + " )  共计 <span style='color: red'>" + $("#s_res tr").length + "</span> 个车次");
                        $('.bz').click(function(){alert('未实现真正预订功能！');});
                    } else {
                        $("#s_res").empty();
                        $("#res").empty();
                        layer.msg('没有符合的数据', {'time': 1000});
                    }
                });
            }

            //转化站点代号成站点中文
            function stationChange(stationMap, station){
                //console.log(stationMap);
                //遍历检索出来的站点JSON数据
                $.each(stationMap, function(k, v) {
                    //console.log(k+v);
                    if (k == null || k == '') {
                        layer.msg('获取站点信息失败！', {'time': 1000});
                        return false;
                    }
                    if (station == k) {
                        //console.log(v);
                        station = v;
                    }
                });
                return station;
            }

            //转化时间字符串成日期对象，再通过日期对象获取年、月、日、星期几等
            function dateChange(dateStr){
                // Date.parse()方法解析一个表示某个日期的字符串（如2020/01/01等），并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数
                // 2020-01-01这种为不合法日期字符串，需要替换"-"变成"/"
                var date = new Date(Date.parse(dateStr.replace(/-/g,"/")));
                var dateStr = date.getFullYear() + '年' + (date.getMonth()+1) + '月' + date.getDate() + '日';
                return dateStr; 
            }

        </script>
        
    </body>
</html>